<%@page import="Form.ContractForm"%>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>
<%@page import="com.ckeditor.CKEditorConfig"%>

<!DOCTYPE html>
<html:html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><bean:message key="welcome.title" /></title>
<link
	href="css/mini3537.css?files=reset,common,form,standard,960.gs.fluid,simple-lists,block-lists,planning,table,calendars,wizard,gallery"
	rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon-large.png">
<script type="text/javascript"
	src="js/miniab15.php?files=html5,jquery-1.4.2.min,old-browsers,jquery.accessibleList,searchField,common,standard,jquery.tip,jquery.hashchange,jquery.contextMenu,list"></script>

<link href="datepicker/themes/ui-lightness/jquery.ui.all.css"
	rel="stylesheet" type="text/css">
	
<!--[if lte IE 8]><script type="text/javascript" src="js/standard.ie.js"></script><![endif]-->
<!--[if lt IE 9]><div class="ie"><![endif]-->
<!--[if lt IE 8]><div class="ie7"><![endif]-->

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<html:base />


</head>
<body>
	<%@ include file="/Header.jsp"%>

	<!-- ####################                  Vertical Menu                    ########################## -->
	<%@ include file="/verticalmenu.jsp"%>

	<!-- ####################                  Vertical Menu                    ########################## -->

	<!-- *************************************** Content *************************************************** -->
	<section class="grid_9">
		<div class="block-border">
			<div class="block-content">
				<!-- We could put the menu inside a H1, but to get valid syntax we'll use a wrapper -->
				<div class="h1 with-menu">
					<h1>Web stats</h1>
				</div>

				<div class="block-controls">

					<ul class="controls-tabs js-tabs same-height with-children-tip">
						<li><a href="#tab-stats" title="Charts"><img
								src="images/icons/web-app/24/Bar-Chart.png" width="24"
								height="24"></a></li>
						<li><a href="#tab-comments" title="Comments"><img
								src="images/icons/web-app/24/Comment.png" width="24" height="24"></a></li>
						<li><a href="#tab-medias" title="Medias"><img
								src="images/icons/web-app/24/Picture.png" width="24" height="24"></a></li>
						<li><a href="#tab-users" title="Users"><img
								src="images/icons/web-app/24/Profile.png" width="24" height="24"></a></li>
						<li><a href="#tab-infos" title="Informations"><img
								src="images/icons/web-app/24/Info.png" width="24" height="24"></a></li>
					</ul>
				</div>

				<html:form styleClass="form" action="contract.do" styleId="contract">
					<fieldset class="grey-bg">
						<legend>
							<a href="#">Options</a>
						</legend>

						<div class="float-left gutter-right">
							<label for="stats-period"> Name</label> <span
								class="input-type-text"> <html:text name="ContractForm"
									property="name" styleId="nameCus"></html:text></span>
						</div>
						<div class="float-left gutter-right">
							<label for="stats-period">Contract Number</label> <span
								class="input-type-text"> <html:text
									property="contractNumber" name="ContractForm"
									styleId="contractNumber"></html:text></span>
						</div>
						<div class="float-left gutter-right">
							<label for="stats-period">Create Date</label> <span
								class="input-type-text"> <html:text property="dateCreate"
									name="ContractForm" styleId="dateCreate"></html:text></span>
						</div>


						<div class="float-left gutter-right">
							<label for="stats-period">Custommer</label> <span
								class="input-type-text"> <html:text
									property="nameCustommers" name="ContractForm"
									styleId="nameCustommers" onclick="openCustummer()"></html:text></span>
							<html:hidden property="idCustommers" />
						</div>
						<div class="float-left gutter-right">
							<br> <label for="stats-period">Room</label> <span
								class="input-type-text"> <html:text property="nameRooms"
									name="ContractForm" styleId="nameRooms" onclick="openRoom()"></html:text></span>
							<html:hidden property="idRoom" styleId="idRoom"/>
							<html:hidden property="singlPrice" styleId="singlPrice" />
							
						</div>
						<div class="float-left gutter-right">
							<br> <label for="stats-period">Of Buitl</label> <span
								class="input-type-text"> <html:text property="built"
									name="ContractForm" styleId="nameBuilt" disabled="true"></html:text></span>							
						<html:hidden property="idBuilt" />
						</div>

						<div class="float-left gutter-right">
							<br> <label for="stats-period">Payment Mode</label>
							<html:select name="ContractForm" property="idPaymentMode"
								styleId="idPaymentMode" onchange="calculatorPrice()">
								<html:options collection="arrPaymentMode" property="id"
									labelProperty="paymentMode" />
							</html:select>
						</div>
						
						 <div class="float-left gutter-right">
							<br> <label for="stats-period">Total Price</label> <span
								class="input-type-text"> <html:text property="totalPrice" style="color: red;"
									name="ContractForm" styleId="totalPrice" ></html:text>USD</span>																				
						</div>
                        
						<div class="float-left gutter-right">
							<br> <span class="input-type-text"> <label
								for="stats-period">Note</label> <html:textarea property="note"
									styleId="noteCus" name="ContractForm"
									style="margin-top: 2px; margin-bottom: 2px; height: 67px; margin-left: 2px; margin-right: 2px; width: 674px; " /></span>
						</div>

						<div class="float-left gutter-right">
							<br> <span class="input-type-text"> <label
								for="editor1">Content</label> <html:textarea property="content"
									styleId="editor1" styleClass="ckeditor"
									style="margin-top: 2px; margin-bottom: 2px; height: 243px; margin-left: 2px; margin-right: 2px; width: 747px; " />
							</span>
							<%
								CKEditorConfig settings = new CKEditorConfig();
										settings.addConfigValue(
												"toolbar",
												"[['Styles','Format','Font','FontSize' ],[ 'Bold','Italic','Strike','-','RemoveFormat' ],"
														+ "[ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ],[ 'TextColor','BGColor' ] ]");
							%>
							<ckeditor:replace replace="editor1" basePath="/NTB/ckeditor/"
								config="<%=settings%>" />
						</div>

					</fieldset>


					<ul class="message no-margin">

						<button type="button" class="red" onclick="cancel()">Cancel</button>
						<button type="reset" class="grey">Reset</button>
						<button type="button" onclick="saveContract()" id="saveCus" >
						<img src="images/icons/fugue/tick-circle.png" width="16" height="16"> Save
						</button>
					</ul>
				</html:form>
			</div>
		</div>
	</section>


	<!-- *************************************** Content *************************************************** -->
	</article>
	<!--Footer-->
	<%@ include file="/Footer.jsp"%>
	<!-- Footer -->
</body>
</html:html>
<script language="javascript">

function loadForm(){
    var type = '<%=(String) request.getAttribute("type")%>';
    if(type == "detail"){
        document.getElementById("nameCus").disabled=true;
        document.getElementById("contractNumber").disabled=true;
        document.getElementById("dateCreate").disabled=true;
        document.getElementById("nameCustommers").disabled=true;
        document.getElementById("nameRooms").disabled=true;
        document.getElementById("idPaymentMode").disabled=true; 
        document.getElementById("noteCus").disabled=true; 
        document.getElementById("saveCus").disabled=true; 

    }
	
}
//-------------- ngay tao hop dong ----------------
$(function() {
	$( "#dateCreate" ).datepicker();	
});
// -------------- load khach hang ----------------------
function openCustummer(){
	window.open("cus.do?method=findCustommer","Ratting","width=650,height=300,left=150,top=200,toolbar=1,status=1,");
}

function openRoom(){
	window.open("room.do?method=findRoom&","Ratting","width=650,height=300,left=150,top=200,toolbar=1,status=1,");
	
}

//--------------------- save or edit --------------------------------
    var type = '<%=(String) request.getAttribute("type")%>';
    id = '<%=(String) request.getAttribute("id")%>';
	
function saveContract() {
		
		if(validate() == true){
			calculatorPrice();
			if (type == 'add') {
				document.getElementById("contract").action = 'contract.do?method=addContract&type=add';
				document.getElementById("contract").submit();
			} else {
				document.getElementById("contract").action = 'contract.do?method=editContract&type=edit&id='
						+ id;
				document.getElementById("contract").submit();
			}

		}
		
	}
	function validate(){
		if(document.getElementById("nameCustommers").value == ''){
			alert('Plesea Insert Custommer');
			return false;
		}
		
		if(document.getElementById("contractNumber").value == ''){
			alert('Plesea Insert Contract Number');
			return false;
		}
		
		if(document.getElementById("nameRooms").value == ''){
			alert('Plesea Insert Room');
			return false;
		}
		
		
		return true;
	}

	
	
	//---------------------------------------------------------------------------
	function calculatorPrice(){
		
		var mode = document.getElementById("idPaymentMode").value;
		singlePriec = document.getElementById("singlPrice").value;
		controlPrice = document.getElementById("totalPrice");
		if(mode == '1'){
			controlPrice.value = (parseInt(singlePriec)* 0.05 + parseInt(singlePriec)).toString()  ;
		}else if(mode == '2'){
			controlPrice.value = (parseInt(singlePriec)* 0.03 + parseInt(singlePriec)).toString() ;
		}else{
			controlPrice.value = singlePriec ;
		}
			
	}

	function cancel() {
		document.getElementById("contract").action = 'contract.do?method=getAllContract';
		document.getElementById("contract").submit();
	}
</script>